<template>
  <div class="grid-card" ref="gridCard" @mousemove="onMouseMove">
    <div class="grid-card-item" v-for="(item, index) in 9" :key="index">
      <div class="inner">
        <img :src="require(`@/assets/images/800${index}.jpg`)" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { gsap } from "gsap-trial";
import { onMounted, ref, reactive, computed, watch } from "vue";

const gridCard = ref(null);
const onMouseMove = (event) => {
  let cardItem = gridCard.value.querySelectorAll(".grid-card-item");
  cardItem.forEach((item, index) => {
    const rect = item.getBoundingClientRect();
    const x = event.clientX - rect.left - rect.width / 2;
    const y = event.clientY - rect.top - rect.height / 2;
    gsap.set(item, {
      "--borderX": `${x}px`,
      "--borderY": `${y}px`,
    });
  });
};
onMounted(() => {
  //   init();
});
</script>

<style lang="scss" scoped>
.grid-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height:900px;
  transition: all 0.5s ease;
  cursor: url(@/assets/images/torch.png), auto;
  .grid-card-item {
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0);
    .inner {
      position: absolute;
      inset: 4px;
      border-radius: inherit;
      text-align: center;
      background: #222;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  @for $i from 1 through 9 {
    .grid-card-item:nth-child(#{$i}) {
      height: 100%;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          closest-side,
          hsl($i * 40%, 100%, 75%),
          transparent
        );
        transform: translate(var(--borderX, -1000px), var(--borderY, -1000px));
      }
    }
    &:has(.grid-card-item:nth-child(#{$i}):hover) {
      $r: floor(($i - 1) / 3 + 1);
      $c: ($i - 1) % 3 + 1;
      $arr: (1fr 1fr 1fr);
      $rows: set-nth($arr, $r, 2fr); // 高版本更新 list.set-nth
      $cols: set-nth($arr, $c, 2fr);
      grid-template-rows: $rows;
      grid-template-columns: $cols;
    }
  }
}
</style>
